<template>
  <div>
    <div class="header-container">
      <span>个人信息</span>
      <el-link icon="el-icon-edit" @click="editOrSave">{{
        editFlag ? "保存" : "编辑"
      }}</el-link>
    </div>
    <div class="main-container">
      <el-form
        ref="form"
        :model="userInfo"
        label-width="70px"
        label-position="left"
      >
        <el-form-item label="昵称">
          <el-input v-if="editFlag" v-model="userInfo.nickName"></el-input>
          <div class="show-text" v-else>{{ userInfo.nickName }}</div>
        </el-form-item>
        <el-form-item label="性别">
          <el-select
            v-if="editFlag"
            v-model="userInfo.sex"
            placeholder="请选择性别"
          >
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
            <el-option label="保密" value="保密"></el-option>
          </el-select>
          <div class="show-text" v-else>{{ userInfo.sex }}</div>
        </el-form-item>
        <el-form-item label="职位">
          <el-select
            v-if="editFlag"
            v-model="userInfo.position"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in positionList"
              :key="index"
              :label="item.position"
              :value="item.position"
            >
            </el-option>
          </el-select>
          <div class="show-text" v-else>{{ userInfo.position }}</div>
        </el-form-item>
        <el-form-item label="城市">
          <el-cascader
            v-if="editFlag"
            v-model="userInfo.address"
            :options="addressList"
            :props="{ expandTrigger: 'hover', label: 'name', value: 'name' }"
          ></el-cascader>
          <div class="show-text" v-else>
            {{ userInfo.address ? userInfo.address.join("--") : "" }}
          </div>
        </el-form-item>
        <el-form-item label="密码" v-if="editFlag">
          <el-input v-model="userInfo.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" v-if="editFlag">
          <el-input v-model="checkPsw" show-password></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { setUserInfo, getPositionList, getUserInfo } from "@/services/user";
export default {
  data() {
    return {
      userInfo: {},
      positionList: [],
      addressList: [],
      editFlag: false,
      checkPsw: "",
    };
  },
  methods: {
    getPositionlst() {
      getPositionList().then((res) => {
        const data = res.data;
        this.positionList = data.data;
      });
    },
    getUserInfos() {
      getUserInfo().then((res) => {
        this.userInfo = res.data.data;
        let { province, city, region } = this.userInfo;
        this.userInfo.address = [province, city, region];
        this.userInfo.password = "";
      });
    },
    changeUserInfo() {},
    editOrSave() {
      if (this.editFlag) {
        if (this.userInfo.password != this.checkPsw) {
          alert("两次密码输入不同！");
          return;
        }
        this.userInfo.province = this.userInfo.address[0];
        this.userInfo.city = this.userInfo.address[1];
        this.userInfo.region = this.userInfo.address[2];
        setUserInfo(this.userInfo).then((res) => {
          const data = res.data;
          if (data.msg == "更新成功") {
            this.editFlag = false;
            this.$message(data.msg);
            this.getUserInfos();
          } else {
            this.$message.error(data.msg);
          }
        });
      } else {
        this.editFlag = true;
      }
    },
  },
  created() {
    this.addressList = JSON.parse(localStorage.getItem("addressList"));
    this.getPositionlst();
    this.getUserInfos();
  },
};
</script>
<style lang="scss" scoped>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding-bottom: 12px;
  border-bottom: 1px solid #d0d6d9;
}
::v-deep .el-form {
  margin-top: 30px;
  .el-form-item {
    height: 40px;
    margin-bottom: 20px;
    .el-form-item__label {
      font-weight: bold;
    }
    .el-form-item__content {
      > div {
        width: 300px;
      }
      .show-text {
        padding-left: 16px;
      }
    }
  }
}
</style>